<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>王者荣耀论坛注册页</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/common-new.css"/>
    <link rel="stylesheet" href="../css/search.css"/>
    <link rel="stylesheet" href="../css/register.css"/>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 头部 -->
    <div class="hm-top-nav">
        <div class="hm-inner clearfix">
            <div class="hm-inner-l l">
            </div>
            <div class="hm-inner-r r">
                <div class="box">
                    <a href="javascript:;" id="login" class="to-login">游客登录</a>
                    <a href="">【新用户注册】</a>
                    <div id="dialogBg"></div>
                    <div id="dialog" class="animated">
                        <img class="dialogIco" width="50" height="40" src="../images/ico.png"/>
                        <div class="dialogTop" style="height:25px;">
                            <a href="javascript:;" class="closeDialogBtn">关闭</a>
                        </div>
                        <form action="" method="post">
                            <ul class="editInfos">
                                <li>用户名：<input type="text" name="userName" class="ipt"/></li>
                                <li>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="userPass" class="ipt"/></li>
                                <li><input type="submit" value="登录" class="submitBtn"/></li>
                            </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="hm-header">
        <div class="hm-inner clearfix">
            <div class="hm-header-t clearfix">
                <h1 class="logo l">
                    <a href="javascript:;"><img src="../images/logo.png" height="64" width="168" alt=""/></a>
                </h1>
                <div class="search-box l">
                    <form action="javascript:;">
                        <input type="text" class="txt l" placeholder="请输入关键字">
                        <input type="button" value="搜索" class="btn l"/>
                    </form>
                </div>
            </div>
            <div class="hm-header-b">
                <i class="hm-ico-home"></i>
                <a href="index.html">首页</a><span>></span>注册页面
            </div>
        </div>
    </div>


    <div class="hm-body hm-body-bgc">
        <div class="hm-inner">
            <div class="reg-box">
                <h2>用户注册<span>（红色型号代表必填）</span></h2>
                <div class="reg-info">
                    <form action="" method="post">
                        <ul>
                            <li>
                                <div class="reg-l">
                                    <span class="red">*</span> 用户名：
                                </div>
                                <div class="reg-c">
                                    <input type="text" id="userName" name="userName" @blur="checkUserName()" class="txt" value=""/>
                                </div>
                                <span class="tips" id="span_username">用户名必须是由英文、数字、下划线组成</span>
                            </li>
                            <li>
                                <div class="reg-l">
                                    <span class="red">*</span> 密&nbsp;&nbsp;&nbsp;码：
                                </div>
                                <div class="reg-c">
                                    <input type="password" id="userPass" @blur="checkPassword()" name="userPass" class="txt" value=""/>
                                </div>
                                <span class="tips">密码长度必须6~10位的英文或数字</span>
                            </li>
                            <li class="no-tips">
                                <div class="reg-l">&nbsp;&nbsp;邮&nbsp;&nbsp;&nbsp;箱：</div>
                                <div class="reg-c">
                                    <input type="text" id="email" name="email" @blur="checkEmail()" class="txt" value=""/>
                                </div>
                            </li>
                            <li>
                                <div class="reg-l"></div>
                                <div class="reg-c">
                                    <input type="submit" @click="register()" class="submit-btn" value="注册"/><br/>
                                    <span style="color:red;" v-if="this.code==1">用户名已经存在！</span>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="hm-footer" style="padding-top:10px;">
        <div class="hm-inner">
            <div class="hm-footer-cpr">
                <p>Copyright@2006-2017 ITCAST. All Rights Reserved</p>
                <p>传智播客 版权所有</p>
            </div>
        </div>
    </div>
</div>


</body>

<script type="text/javascript">
    $(function () {
        //显示弹框
        $('.box #login').click(function () {
            var className = $(this).attr('class');
            $('#dialogBg').fadeIn(300);
            $('#dialog').removeAttr('class').addClass('animated ' + className + '').fadeIn();
            $('#userName').focus();
            $("#j_fixedBar").hide();
        });

        //关闭弹窗
        $('.closeDialogBtn').click(function () {
            $('#dialogBg').fadeOut(300, function () {
                $('#dialog').addClass('bounceOutUp').fadeOut();
                $("#j_fixedBar").show();
            });
        });

        // //验证用户名;
        // function checkUserName() {
        //     var userName = $("#userName").val();
        //     var userName_Reg = "/^[a-zA-Z0-9_]+$/";
        //     var boolean = userName_Reg.test(userName);
        //     if (boolean) {
        //         alert(userName);
        //     }
        // }
    });
</script>

<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                code:0
            }
        },
        methods: {
            //验证用户名;
            checkUserName() {
                var userName = $("#username").val();
                var userName_Reg = /^[a-zA-Z0-9_]+$/;
                var flag = userName_Reg.test(userName);
                if (flag) {
                    //说明用户名合法
                    $("#username").css("border", "");
                    //查询用户是否存在
                    axios.get(`/user/findUserByUsername.do`).then(response => {
                        this.code = response.data.code;
                    })

                } else {
                    //用户名非法
                    $("#username").css("border", "1px solid red");
                }
                return flag;
            },

            //校验密码
            checkPassword() {
                var password = $("#userPass").val();
                var password_Reg = /^\w{6,10}$/;
                var flag = password_Reg.test(password);
                if (flag) {
                    //说明密码合法
                    $("#userPass").css("border", "");
                } else {
                    //密码不合法
                    $("#userPass").css("border", "1px solid red");
                }
                return flag;
            },

            //校验邮箱
            checkEmail() {
                var email = $("#email").val();
                var email_Reg = /^\w+@\w+\.\w+$/;
                var flag = email_Reg.test(email);
                if (flag) {
                    //说明密码合法
                    $("#email").css("border", "");
                } else {
                    //密码不合法
                    $("#email").css("border", "1px solid red");
                }
                return flag;
            },
            register(){

                if (this.checkEmail() && this.checkPassword() && this.checkEmail()){
                    axios.post(`/user/regist.do`).then(response => {
                        if (response.data.code==1){
                            alert(response.data.message);
                            this.user = {};
                        }else{
                            location.href = "index.html";
                        }
                    })
                }

            }
        }
    })


</script>
</html>